<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>中国铁路12306</title>
    <link rel="stylesheet" href="./lib/reset/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/zhuce.css">
</head>

<body>
    <!-- 1.顶部导航 -->
    <div class="topnav">
        <!-- 1.1版心 -->
        <div class="container clearfix">
            <!-- 1.1.1 logo -->
            <div class="topnav-logo">
                <img src="./img/zhuce-img/logo.png" alt="">
            </div>
            <!-- 1.1.2搜索框 -->
            <div class="topnav-search clearfix">
                <div class="topnav-search-input">
                    <input type="text" placeholder="搜索车票/餐饮/常旅客/相关规章">
                    <i class="iconfont">&#xe61e;</i>
                </div>
            </div>

            <!-- 1.1.3右边登录 -->
            <div class="topnav-right">
                <div class="wenzi">
                    <a href="">
                        <span>我的12306</span>
                    </a>

                </div>
                <div class="font">
                    <i class="iconfont">&#xe642;</i>
                </div>
                <div class="font2">
                    <i class="iconfont">&#xe63a;</i>
                </div>
                <div class="zui">
                    <span>您好 请</span>
                    <a href="">

                        <span class="spcial">登录</span>
                    </a>
                    <a href="">
                        <span class="spcial">注册</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 2.头部 -->
    <div class="header">
        <div class="container clearfix">
            <div class="first">
                <span>首页</span>
            </div>

            <div class="gege">
                <span>车票</span>
                <i class="iconfont">&#xe635;</i>
            </div>

            <div class="gege">
                <span>团购服务</span>
                <i class="iconfont">&#xe635;</i>
            </div>

            <div class="gege">
                <span>会员服务</span>
                <i class="iconfont">&#xe635;</i>
            </div>

            <div class="gege">
                <span>站车服务</span>
                <i class="iconfont">&#xe635;</i>
            </div>

            <div class="gege">
                <span>商旅服务</span>
                <i class="iconfont">&#xe635;</i>
            </div>

            <div class="gege">
                <span>出行服务</span>
                <i class="iconfont">&#xe635;</i>
            </div>

            <div class="gege">
                <span>信息查询</span>
                <i class="iconfont">&#xe635;</i>
            </div>
        </div>

    </div>

    <!-- 3.内容部分 -->
    <div class="banner">
        <div class="container clearfix">
            <div class="banner-top">
                <span>您现在的位置：</span>
                <p>客运首页>注册</p>
            </div>
            <div class="banner-bottom clearfix">
                <div class="banner-bottom-top">
                    <span>账户信息</span>
                </div>
                <div class="banner-bottom-bottom">
                    <!-- <div class="input"> -->
                    <ul class="gege">
                        <li class="ge">

                            <div class="qian">
                                <span><s>*</s>用户名：</span>
                            </div>
                            <div class="text">
                                <input type="text" placeholder="用户名设置成功后不可修改">
                            </div>
                            <div class="end1">
                                <span>6-30位字母、数字或"-",字母开头</span>
                            </div>
                        </li><br>
                        <li class="ge">

                            <div class="qian">
                                <span><s>*</s>登录密码：</span>
                            </div>
                            <div class="text">
                                <input type="text" placeholder="6-30位字母、数字或符号">
                            </div>

                        </li><br>
                        <li class="ge">

                            <div class="qian">
                                <span><s>*</s>确认密码：</span>
                            </div>
                            <div class="text">
                                <input type="text" placeholder="再次输入您的登录密码">
                            </div>
                        </li><br>
                        <li class="ge">

                            <div class="qian">
                                <span><s>*</s>证件类型：</span>
                            </div>
                            <div class="text">
                                <form action="form1">
                                    <select name="a1" id="hx">
                                        <option value="1">中国居民身份证</option>
                                        <option value="2">港澳居民来往内地通行证</option>
                                        <option value="3">台湾居民来往大陆通行证</option>
                                        <option value="4">护照</option>
                                    </select>
                                </form>
                            </div>
                        </li><br>
                        <li>
                            <div>
                                <input type="radio">中国居民身份证<br>
                                <input type="radio">外国人永久居留身份证<br>
                                <input type="radio">港澳台居民居住证<br>
                            </div>
                        </li><br>
                        <li class="ge">

                            <div class="qian">
                                <span><s>*</s>姓名：</span>
                            </div>
                            <div class="text">
                                <input type="text" placeholder="请输入姓名">
                            </div>
                            <div class="end2">
                                <span>姓名填写规则(用于身份核捡,请正确填写)</span>
                            </div>
                        </li><br>
                        <li class="ge">

                            <div class="qian">
                                <span><s>*</s>证件号码：</span>
                            </div>
                            <div class="text">
                                <input type="text" placeholder="请输入您的证件号码">
                            </div>
                            <div class="end3">
                                <span>(用于身份检核,请正确填写)</span>
                            </div>
                        </li><br>
                        <li class="ge">

                            <div class="qian">
                                <span>邮箱：</span>
                            </div>
                            <div class="text">
                                <input type="text" placeholder="请正确填写邮箱地址">
                            </div>
                        </li><br>
                        <li class="ge">

                            <div class="qian">
                                <span><s>*</s>手机号码(+86)：</span>
                            </div>
                            <div class="text">
                                <input type="text" placeholder="请输入您的手机号码">
                            </div>
                            <div class="end4">
                                <span>请正确填写手机号码,稍后将向该手机号码发送短信验证码</span>
                            </div>
                        </li><br>
                        <li class="ge">

                            <div class="qian">
                                <span><s>*</s>旅客类型：</span>
                            </div>
                            <form action="form1">
                                <select name="a1" id="">
                                    <option value="1">成人</option>
                                    <option value="2">儿童</option>
                                    <option value="3">学生</option>
                                    <option value="4">残疾军人,伤残人民警察</option>
                                </select>
                            </form>
                        </li><br>
                        <li class="end5">
                            <input type="radio">我已阅读并同意遵守<small>《中国铁路客户服务中心网站服务条款》&nbsp;&nbsp;《隐私权政策》</small>
                        </li>
                    </ul>
                    <!-- </div><br> -->
                    <!-- <div class="button">
                        <button>下一步</button>
                    </div> -->
                </div>
            </div>
        </div>
    </div>


    <!-- 4.底部 -->
    <div class="footer">
        <div class="container clearfix">
            <div class="footer-left">
                <div class="footer-left-top">
                    <h2>友情链接</h2>
                </div>
                <div class="footer-left-bottom">
                    <a href="">
                        <img src="./upload/zhuce-upload/01 (2).png" alt="">
                    </a>
                    <a href="">
                        <img src="./upload/zhuce-upload/02(2).png" alt="">
                    </a>
                    <a href="">
                        <img src="./upload/zhuce-upload/03(2).png" alt="">

                    </a>
                    <a href="">
                        <img src="./upload/zhuce-upload/04(2).png" alt="">
                    </a>
                </div>
            </div>
            <div class="footer-right">
                <div class="footer-right-top">
                    <span class="one">中国铁路官方微信</span>
                    <span class="two">中国铁路官方微博</span>
                    <span class="three">12306公众号</span>
                    <span class="four">铁路12306</span>
                </div>
                <div class="footer-right-bottom">
                    <img src="./img/zhuce-img/erweima01.png" alt="" class="one">
                    <img src="./img/zhuce-img/erweima02.png" alt="" class="two">
                    <img src="./img/zhuce-img/erweima03.png" alt="" class="three">
                    <img src="./img/zhuce-img/erweima04.png" alt="" class="four">
                </div>
                <div class="zui">
                    <p>官方APP下载，目前铁路未授权
                        其他网站或APP开展类似服务内
                        容，敬请广大用户注意。</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 5.底部商标 -->
    <div class="brand">
        <div class="container">
            <div class="foot">
                <p>版权所有©2008-2019 中国铁道科学研究院集团有限公司</p>
                <p>京ICP备05020493号-4 | 京ICP证150437号</p>
            </div>

        </div>
    </div>

</body>

</html>